<template>
  <div>
    <el-dialog title="修改密码" :visible.sync="visible" width="35%">
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-form el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
        <el-form-item label="原密码" prop="pass" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.pass" type="password" size="small" placeholder="请输入原密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpass" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.newpass" type="password" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.checkPass" type="password" placeholder="请输入确认密码"></el-input>
        </el-form-item>
      </el-form>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      //form表单验证
      var pass = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'));
        } else {
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.newpass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          newpass: ''
        },
        rules: {
          pass: [{
            validator: pass,
            trigger: 'blur'
          }],
          newpass: [{
            validator: validatePass,
            trigger: 'blur'
          }],
          checkPass: [{
            validator: validatePass2,
            trigger: 'blur'
          }]

        },
        visible: false,
        formLabelWidth: "70px"
      }
    },
    methods: {
      xgmm(visible) {
        this.visible = visible;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 修改密码
            this.$axios.request({
              url: this.API+"/administrator/administratorUser/updatePWD",
              params: {
                oldPWD: this.ruleForm.pass,
                newPWD: this.ruleForm.checkPass,
                id: parseInt(localStorage.getItem("userId"))
              },
              method:"post"
            }).then((res) => {
              if (res.data.code == 0) {
                this.visible = false;
                this.$message.success("修改密码成功");
                this.$refs[formName].resetFields(); //重置密码
              } else {
                this.$message.error(res.data.msg);
              }
            });
          }
        });

      },
    }
  }
</script>

<style>
  .el-dialog {
    border-radius: 10px;
    padding: 0;
  }

  .dialog-footer {
    margin-top: -10px;
  }

  .el-dialog__body {
    padding: 0;
  }

  .el-divider {
    margin-top: 8px;
  }

  .el-form {
    margin: 30px 20px;
  }
</style>
